import React, { useState, useLayoutEffect, useEffect, PureComponent, forwardRef, useContext, createContext, useReducer, memo, useCallback, useMemo, useRef, useImperativeHandle } from 'react'
const userCtx = createContext({
  name: 'aaa',
  age: 99,
})
const tokenCtx = createContext('111')
export default function Test() {
  return (
    <userCtx.Provider value={{ name: 'zjd', age: 19 }}>
      <tokenCtx.Provider value='aaa'>
        <Home></Home>
      </tokenCtx.Provider>
    </userCtx.Provider>
  )
}
const Home = props => {
  // 1.传统方式
  // const userInfo = useContext(userCtx)
  // const tokenInfo = useContext(tokenCtx)
  
  // 2.自定义hooks实现
  const [userInfo, tokenInfo] = useUserTokenCtx()
  console.log(userInfo, tokenInfo)
  return (
    <>
      Home
      <hr />
      {`姓名： ${userInfo.name} - 年龄： ${userInfo.age}`}
    </>
  )
}

function useUserTokenCtx() {
  const userInfo = useContext(userCtx)
  const tokenInfo = useContext(tokenCtx)
  return [userInfo, tokenInfo]
}
